<template>
  <div>

    <ul>
      <li>姓名:
        <input type="text" v-model="talist.name1">
      </li>
      <li>年龄:
        <input type="text" v-model="talist.name2">
      </li>
      <li>性别:
        <input type="text" v-model="talist.name3">
      </li>
      <li>班级:
        <input type="text" v-model="talist.name4">
      </li>
      <li @click="add" class="wp">添加
      </li>
    </ul>

    <div class="qp">
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>班级</td>
        <td>操作</td>
      </tr>


    </div>
    <tr v-for="(item, index) in tabtac" :key="index">
      <td>{{ item.name1 }}</td>
      <td>{{ item.name2 }}</td>
      <td>{{ item.name3 }}</td>
      <td>{{ item.name4 }}</td>
      <td @click="del(index)">删除</td>
    </tr>
  </div>
  <p>女生：{{ upp }}</p>
  <p>年龄大于22 {{ tp }}</p>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'


const tabtac = ref([])
const talist = reactive({
  name1: '',
  name2: '',
  name3: '',
  name4: ''

})

const add = () => {

  console.log(1)
  tabtac.value.push(JSON.parse(JSON.stringify(talist)))
}
const del = (i) => {
  tabtac.value.splice(i, 1)
}
const upp = computed(() => {
  let num = tabtac.value.filter(item => item.name3 == "女")
  return num.length
})

const tp = computed(() => {
  let nums = tabtac.value.filter(item => item.name2 >= 22)
  return nums.length
})

</script>

<style lang="scss" scoped>
ul {
  li {
    list-style: none;
    margin-top: 10px;

    input {
      //  caret-color: #d55f94b4;
      outline-style: none;
      cursor: pointer;
    }
  }
}


tr {
  td {
    width: 100px;
    cursor: pointer;
  }
}

.wp:hover {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: linear-gradient(to right, #fb9d23, #aaf12f);
  border-radius: 10px;
  color: #d55f94b4;
}

input:hover {

  border: 1px solid rgb(127, 240, 45);
  border-radius: 5px;
}

input:focus {
  outline: 1px solid #f9ce33;
}
</style>